<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
    /*
        过度动画的局限性：
            1：transiton过度需要事件的触发，比如hover click 等，
                而animation则是不需要事件的触发，
            2：transition过度transition是一次性的，不能重复发生，除非一再触发。
                而animation则是可以通过参数控制循环次数，反选循环等等，更加灵活
            3：transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
                而而animation则是可以通过@keyframes通过0% 10% 20% 灵活定义中间状态
     */

    div {
        height: 100px;
        width: 100px;
        background: red;
        transform: scale(1);
    }
    div.on {
        height: 300px;
        width: 300px;
        background: #000;
        transform: scale(2);
        transition: height 3s linear 2s, width 3s ease 5s, background 3s 8s, transform 3s ease-in-out 11s;
    }
    </style>
</head>

<body>
    <div></div>
    <button id="btn">切换</button>
    <script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $("div").hover(function() {
        $(this).addClass('on');
    }, function() {
        $(this).removeClass('on');
    });
    </script>
</body>

</html>